<template>
  <el-main>
      <el-breadcrumb separator="/" style="margin-bottom:30px;">
          <el-breadcrumb-item :to="{ path: '/home/index/welcome' }">首页
          </el-breadcrumb-item>
          <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form ref="editForm" :model="editForm" label-width="100px" :rules="rules" style="width:50%;">
        <!-- 角色类型 -->
        <el-form-item label="角色类型" prop="Type">
              <el-input v-model="editForm.Type" :disabled="true" autocomplete='off'></el-input>
          </el-form-item>
          <!-- 登录名 -->
          <el-form-item label="登录名" prop="UserName">
              <el-input v-model="editForm.UserName" :disabled="true" autocomplete='off'></el-input>
          </el-form-item>
          <!-- 昵称 -->
          <!-- <el-form-item label="昵称" prop="nickName">
              <el-input v-model="editForm.nickName" autocomplete='off'></el-input>
          </el-form-item> -->
          <!-- 邮箱 -->
          <!-- <el-form-item prop="email" label="邮箱" :rules="[
              { type: 'email', message: '邮箱不能为空' , trigger: ['blur'] }
              ]">
              <el-input v-model="editForm.email" autocomplete='off'></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
              <el-input type="tel"
                  pattern.native="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"
                  v-model="editForm.phone" autocomplete='off'></el-input>
          </el-form-item> -->
          <!-- 是否修改密码 -->
          <el-form-item label="修改密码">
              <el-switch v-model="isEditPassword" autocomplete='off'></el-switch>
          </el-form-item>
          <template v-if="isEditPassword">
              <el-form-item label="旧密码" prop="OldPassword">
                  <el-input placeholder="请输入" v-model="editForm.OldPassword"
                      show-password autocomplete='off'></el-input>
              </el-form-item>
              <!-- 登录修改 -->
              <el-form-item label="登录密码" prop="password">
                  <el-input placeholder="请输入" v-model="editForm.password"
                      show-password autocomplete='off'></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="确认密码" prop="password2">
                  <el-input placeholder="请输入" v-model="editForm.password2"
                      show-password autocomplete='off'></el-input>
              </el-form-item>
          </template>
      </el-form>
      <div style="text-align: center;width: 50%">
          <el-button @click="handleEdit">重置</el-button>
          <el-button type="primary" @click="setAccountInfo('editForm')">确认</el-button>
      </div>
  </el-main>
</template>
<script>
  import {
    accountNemberList,
    accountNemberSet
  } from '../../api.js'
  import {
      mapState
  } from 'vuex'

  export default {
      name: "personal",
      data() {
          var validatePass2 = (rule, value, callback) => {
              console.log(value)
              if (value === '') {
                  callback(new Error("密码不能为空"));
              } else if (value !== this.editForm.password) {
                  callback(new Error("密码不一致"));
              } else {
                  callback();
              }
          }
          var passwordnew = (rule, value, callback) => {
                var text = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*[~!@#$%^&*?_-]).{8,12}$/;
                console.log(value)
                if (value === '') {
                    callback(new Error("密码不能为空"));
                    
                }else if (!text.test(value)) {
                    callback(new Error("密码由大小写字母、数字、特殊符号(~!@#$%^&*?_-)组成的8-12位字符"));
                } else {
                    callback();
                }
            }
          return {
              breadcrumbName: '',
              breadcrumbPath: '',
              breadcrumbNameP: '',
              isEditPassword: false,
              editForm: {
                  Uid:'',
                  Type:'',
                //   nickName: '',
                  password: '',
                  password2: '',
                  UserName: '',
                  OldPassword:'',
              },
              rules: { 
                password:[{
                    required: true,
                    validator: passwordnew,
                    trigger: 'blur'
                }],
                  OldPassword: [{
                      required: true,
                      message: '请输入旧密码',
                      trigger: 'blur'
                  }],
                  password2: [{
                      required: true,
                      validator: validatePass2,
                      trigger: 'blur'
                  }],
              },
          }
      },
      mounted() {
          this.breadcrumbName = this.$route.query.breadcrumbName
          this.breadcrumbPath = this.$route.query.breadcrumbPath
          this.breadcrumbNameP = this.$route.query.breadcrumbNameP
          this.getAccountInfo()
      },
      methods: {
          getAccountInfo(index, row) {
            accountNemberList({}).then(res => {
                  if (res.ErrorCode == 0) {
                    //   this.editForm.nickName = res.Data.nick_name
                      this.editForm.Uid = res.Data.id
                      this.editForm.password = ''
                      this.editForm.password2 = ''
                      this.editForm.OldPassword = ''
                      this.editForm.Type = res.Data.role_name
                      this.editForm.UserName = res.Data.user_name
                  } else {
                      this.$message.error(res.ErrorMsg);
                  }
              })
          },
          setAccountInfo(formName) {
            var _this = this;
              this.$refs[formName].validate((valid) => {
                  if (valid) {
                      //  var dataObj = JSON.parse(JSON.stringify(this.editForm)) ;
                       var data = {
                        // nike_name:_this.editForm.nickName,
                        old_password:_this.editForm.OldPassword,
                        new_password:_this.editForm.password,
                        confirm_password:_this.editForm.password2,
                       }
                       accountNemberSet(data).then(res => {
                          if (res.ErrorCode == 0) {
                              this.$message.success("操作成功");
                              this.getAccountInfo();
                          } else {
                              this.$message.error(res.ErrorMsg);
                          }
                      })
                  }
              })
          },
          handleEdit(){
              this.getAccountInfo();
          },
      },
      computed: {
          ...mapState({
              language: state => state.language
          }),
      },
  }
</script>

<style>

</style>